<template>
  <div class="personal">
    <div class="zl">
      <div
        class="datou"
        :style="{ 'background-image': 'url(' + prof.backgroundUrl + ')' }"
      >
        <div class="tou">
          <van-image
            class="img"
            round
            width="150px"
            height="120px"
            :src="prof.avatarUrl"
          />
          <div class="three">
            <van-row type="flex" class="nam">
              <van-col class="num" span="8">{{ followeds.length }}</van-col>
              <van-col class="num" span="8">{{ follows.length }}</van-col>
              <van-col class="num" span="8">{{ profe.level }}</van-col>
            </van-row>
            <van-row type="flex" class="nam">
              <van-col class="num" span="8" @click="$router.push('/fen')"
                >粉丝</van-col
              >
              <van-col class="num" span="8" @click="$router.push('/recommend')"
                >关注</van-col
              >
              <van-col class="num" span="8">等级</van-col>
            </van-row>
          </div>
          <div class="bianji">编辑信息</div>
        </div>
      </div>
      <div class="playlist">
        <h2 style="line-height: 40px">创建的歌单</h2>
        <ul>
          <li v-for="(item, index) in playlist" :key="index">
            <van-cell :title="item.name" icon="music-o" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      prof: [],
      profe: [],
      follows: [],
      followeds: [],
      playlist: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    //获取登录状态
    async getdetail() {
      axios.get("/login/status", { withCredentials: true }).then((res) => {
        this.prof = res.data.data.profile;
        console.log(this.prof);
        this.getfollows();
        this.getfolloweds();
        this.getplaylist();
      });
    },
    //获取等级信息
    async getacc() {
      axios.get("/user/level", { withCredentials: true }).then((res) => {
        this.profe = res.data.data;
      });
    },
    //获取关注信息
    async getfollows() {
      axios
        .get(`/user/follows?uid=${this.prof.userId}`, { withCredentials: true })
        .then((res) => {
          this.follows = res.data.follow;
        });
    },
    //获取粉丝信息
    async getfolloweds() {
      axios
        .get(`/user/followeds?uid=${this.prof.userId}`, {
          withCredentials: true,
        })
        .then((res) => {
          this.followeds = res.data.followeds;
        });
    },
    //获取歌单信息
    async getplaylist() {
      axios
        .get(`/user/playlist?uid=${this.prof.userId}`, {
          withCredentials: true,
        })
        .then((res) => {
          this.playlist = res.data.playlist;
        });
    },
  },
  created() {
    this.getdetail();
    this.getacc();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.img {
  position: relative;
  left: 15px;
  top: 5px;
}
.datou {
  height: 290px;
}
.tou {
  display: flex;
  position: relative;
  top: 160px;
  background: #ccc;
  height: 130px;
}
.three {
  width: 50%;
  position: relative;
  left: 25px;
  top: 20px;
}
.nam .num {
  text-align: center;
}
.bianji {
  height: 30px;
  width: 150px;
  border: 2px #000 solid;
  position: relative;
  left: -105px;
  top: 70px;
  text-align: center;
  line-height: 30px;
  border-radius: 25px;
}
.playlist {
  padding: 10px;
  border: 2px #ccc solid;
  border-radius: 30px;
  margin: 20px;
}
.playlist ul {
  font-size: 12px;
  border-top: 2px #ccc solid;
}
.playlist li {
  border-bottom: 1px #ccc solid;
  line-height: 25px;
}
</style>
